<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>新冠肺炎疫情数据可视化动态图表</title>
	<link rel="stylesheet" type="text/css" href="css/default.css">
	<link href="css/app.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <link rel="icon" href="./img/title.svg" type="image/icon">
	<style>
	h1{
		font-size: 40px;
		color: white;
	}
	h2{
		font-size: 32px;
		line-height: 10px;
		color:white;
	}
	h3{
		line-height: 10px;
		color:white;
	}
	body{
		background-color: #427C97 ;
	}
	#testBox{
		width: 1280px;
		height: 720px;
	    margin: 0 auto; /*水平居中*/
	    position: relative;
	    top: 50%; /*偏移*/
	    margin-top: 20px;
        display:none;
	}
    #testBox2{
        width: 1280px;
        height: 720px;
        margin: 0 auto; /*水平居中*/
        position: relative;
        top: 50%; /*偏移*/
        margin-top: 20px;
    }
	.div-a{ 
		float:left;
		width:39%;
	} 
	.div-b{ 
		float:left;
		width:59%;
	}
	#school{
		margin-top: -10px;
		width: 100%;
		display: flex;
		justify-content: center;
	}
	#school img{
		width: 100%;
		height: 100%;
	}
	#maker{
		margin-top: -28px;
		z-index: 10;
		width: 300px;
		height: 100%;
		position: fixed;
		background-color: #283c51;
	}
	#maker p{
		font-size: 20px;
		color: white;
	}
	#maker li.active {
	 	background-color: #427c97;
	}
	</style>
<link rel="stylesheet" href="css/fz-video.css">
<link rel="stylesheet" href="fonts/iconfont.css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
</head>
<body>
<div id="contentWrapper">

	<div id="contentLeft">
		<ul id="leftNavigation">
			<li class="active">
                <a href="javascript:void(0);" style="font-size: 20px" onclick="back()"><i class="fa fa-home leftNavIcon"></i>首页</a>
            </li>
            <li>
                <a href="#" style="font-size: 20px"><i class="fa fa-map leftNavIcon"></i>疫情地图</a>
                <ul>
                    <li>
                        <a href="javascript:void(0);" onclick="change(this)"><i class="fa fa-map-o leftNavIcon"></i>中国地图</a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" onclick="change(this)"><i class="fa fa-map-o leftNavIcon"></i>湖北地图</a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" onclick="change(this)"><i class="fa fa-map-o leftNavIcon"></i>广东地图</a>
                    </li>
                </ul>
            </li>
            <li>
				<a href="#" style="font-size: 20px"><i class="fa fa-area-chart leftNavIcon"></i>折线图</a>
				<ul>
					<li>
						<a href="javascript:void(0);" onclick="change(this)"><i class="fa fa-circle-o-notch leftNavIcon"></i>全球疫情现存确诊前10国家</a>
					</li>
					<li>
						<a href="javascript:void(0);" onclick="change(this)"><i class="fa fa-circle-o-notch leftNavIcon"></i>全球疫情现存确诊前10国家【除美国】</a>
					</li>
					<li>
						<a href="javascript:void(0);" onclick="change(this)"><i class="fa fa-line-chart leftNavIcon"></i>全国现存确诊、治愈</a>
					</li>
					<li>
						<a href="javascript:void(0);" onclick="change(this)"><i class="fa fa-line-chart leftNavIcon"></i>全国累计确诊、治愈、死亡</a>
					</li>
					<li>
						<a href="javascript:void(0);" onclick="change(this)"><i class="fa fa-line-chart leftNavIcon"></i>广东省现存确诊、治愈</a>
					</li>
					<li>
						<a href="javascript:void(0);" onclick="change(this)"><i class="fa fa-line-chart leftNavIcon"></i>湖北省现存确诊、治愈</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#" style="font-size: 20px"><i class="fa fa-bar-chart leftNavIcon"></i>条形竞赛图</a>
				<ul>
					<li>
						<a href="javascript:void(0);" onclick="change(this)"><i class="fa fa-circle-o-notch leftNavIcon"></i>全球累计确诊</a>
					</li>
					<li>
						<a href="javascript:void(0);" onclick="change(this)"><i class="fa fa-circle-o-notch leftNavIcon"></i>全球现存确诊</a>
					</li>
					<li>
						<a href="javascript:void(0);" onclick="change(this)"><i class="fa fa-circle-o-notch leftNavIcon"></i>全球累计治愈</a>
					</li>
					<li>
						<a href="javascript:void(0);" onclick="change(this)"><i class="fa fa-sort-amount-desc leftNavIcon"></i>全国累计确诊</a>
					</li>
					<li>
						<a href="javascript:void(0);" onclick="change(this)"><i class="fa fa-sort-amount-desc leftNavIcon"></i>全国累计确诊【非湖北省】</a>
					</li>
					<li>
						<a href="javascript:void(0);" onclick="change(this)"><i class="fa fa-sort-amount-desc leftNavIcon"></i>全国现存确诊</a>
					</li>
					<li>
						<a href="javascript:void(0);" onclick="change(this)"><i class="fa fa-sort-amount-desc leftNavIcon"></i>全国累计治愈</a>
					</li>
					<li>
						<a href="javascript:void(0);" onclick="change(this)"><i class="fa fa-sort-amount-desc leftNavIcon"></i>全国累计治愈【非湖北省】</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#" style="font-size: 20px"><i class="fa fa-bars leftNavIcon"></i>堆积柱形图</a>
				<ul>
					<li>
						<a href="javascript:void(0);" onclick="change(this)"><i class="fa fa-circle-o-notch leftNavIcon"></i>全球现存确诊、治愈和死亡</a>
					</li>
					<li>
						<a href="javascript:void(0);" onclick="change(this)"><i class="fa fa-list-ol leftNavIcon"></i>全国现存确诊、治愈和死亡</a>
					</li>
					<li>
						<a href="javascript:void(0);" onclick="change(this)"><i class="fa fa-list-ol leftNavIcon"></i>全国现存确诊、治愈和死亡【非武汉】</a>
					</li>
					<li>
						<a href="javascript:void(0);" onclick="change(this)"><i class="fa fa-list-ol leftNavIcon"></i>全国现存确诊、治愈和死亡【非湖北省】</a>
					</li>
					<li>
						<a href="javascript:void(0);" onclick="change(this)"><i class="fa fa-list-ol leftNavIcon"></i>广东省现存确诊、治愈和死亡</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#" style="font-size: 20px"><i class="fa fa-flask leftNavIcon"></i>数据预测</a>
				<ul>
					<li>
						<a href="javascript:void(0);" onclick="change(this)"><i class="fa fa-line-chart leftNavIcon"></i>全国现存确诊预测</a>
					</li>
					<li>
						<a href="javascript:void(0);" onclick="change(this)"><i class="fa fa-line-chart leftNavIcon"></i>全国累计确诊预测</a>
					</li>
					<li>
						<a href="javascript:void(0);" onclick="change(this)"><i class="fa fa-line-chart leftNavIcon"></i>全国累计治愈预测</a>
					</li>
				</ul>
			</li>

		</ul>
		<div id="school">
			<img src="./img/fight.svg">
		</div>
		<div id="maker">
				<ul id="leftNavigation">
					<li class="active">
						<a href="javascript:void(0);"><i class="fa fa-university leftNavIcon"></i>华南师范大学教育信息技术学院</a>
					</li>
					<li class="active">
						<a href="javascript:void(0);"><i class="fa fa-address-book leftNavIcon"></i>2017级教育技术学(师范&非师)</a>
					</li>
				</ul>
		</div>
	</div>

	<div id="contentRight">
		<h1 align="center">新冠肺炎疫情数据可视化动态图表</h1>
		<div id="testBox">
		</div>
        <div id="testBox2">
        </div>
		<div class="div-a">
			<h2>数据来源：</h2>
			<h3><a href="https://github.com/BlankerL/DXY-COVID-19-Data" target="_blank">[GitHub项目]2019新型冠状病毒疫情时间序列数据仓库</a> & <a href="https://3g.dxy.cn/newh5/view/pneumonia" target="_blank">丁香园</a></h3>
		</div>
		<div class="div-b">
			<h2>数据处理：</h2>
			<h3>数据清洗脚本<a href="https://github.com/Avens666/COVID-19-2019-nCoV-Infection-Data-cleaning-" target="_blank">[GitHub项目]COVID-19-2019-nCoV-Infection-Data-cleaning</a> 以及 Excel透视表操作</a></h3>
		</div>
	</div>

</div>

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/jquery.ssd-vertical-navigation.min.js"></script>
<script src="js/app.js"></script>
<script src="js/fz-video.js"></script>
<script src="js/index.js" type="text/javascript"></script>
<script>
    $(window).load(initial());
	function change(obj){
        document.getElementById('testBox').style.display="block";
        document.getElementById('testBox2').style.display="none";
		var a = $(obj).text();
        var trans = {"中国地图":"CNMAP","广东地图":"GDMAP","湖北地图":"HBMAP",
        "全球疫情现存确诊前10国家":"GlobalTop10-Line","全球疫情现存确诊前10国家【除美国】":"GlobalTop10EXUSA-Line",
        "全国现存确诊、治愈":"CNExist-Line","全国累计确诊、治愈、死亡":"CNTotal-Line",
        "广东省现存确诊、治愈":"GDExist-Line","湖北省现存确诊、治愈":"HBExist-Line",
        "全球累计确诊":"GlobalTotalConfirm-Strip","全球现存确诊":"GlobalExistConfirm-Strip",
        "全球累计治愈":"GlobalTotalCure-Strip",
        "全国累计确诊":"CNTotalConfirm-Strip","全国累计确诊【非湖北省】":"CNTotalConfirmEXHB-Strip",
        "全国现存确诊":"CNExistConfirm-Strip",
        "全国累计治愈":"CNTotalCure-Strip","全国累计治愈【非湖北省】":"CNTotalCureEXHB-Strip",
        "全球现存确诊、治愈和死亡":"GlobalExist-Bar","全国现存确诊、治愈和死亡":"CNExist-Bar",
        "全国现存确诊、治愈和死亡【非武汉】":"CNEXistEXWH-Bar",
        "全国现存确诊、治愈和死亡【非湖北省】":"CNExistEXHB-Bar","广东省现存确诊、治愈和死亡":"GDExist-Bar",
        "全国现存确诊预测":"CNExist-Predict","全国累计确诊预测":"CNTotalConfirm-Predict",
        "全国累计治愈预测":"CNTotalCure-Predict"};
		var FZ_VIDEO = new createVideo(
 		"testBox",	//容器的id
 		{
 			url 		: 'https://gitee.com/sleepa1onezz/COVID-19/raw/master/video/'+trans[a]+'.mp4', 	//视频地址
 			autoplay	: false				//是否自动播放
 		}
 	);
	}

    function back(){
        document.getElementById('testBox').style.display="none";
        document.getElementById('testBox2').style.display="block";
        initial();
    }

</script>
</body>
</html>